<template>
  <div class="index">
    <div class="bannerBox clearfix">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="spotLisCont" src="../../assets/banner/banner6.gif"></img>
            </div>
          <div class="swiper-slide">
            <img class="spotLisCont" src="../../assets/banner/banner4.jpg"></img>
          </div>
          <div class="swiper-slide">
            <img class="spotLisCont" src="../../assets/banner/banner2.jpg"></img>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 引入搜索框组件 -->
    <searchBar></searchBar>
    <h2>热门商品</h2>
    <h3>最新的各种热门商品的推荐！</h3>
    <ul class="spotItem clearfix">
      <li class="spotLis" v-for="spotLis in spotLisData" v-bind:key="spotLis.id">
        <img class="spotLisCont" :src="spotLis.spotImg"></img>
        <span class="spotLisCont spotTitle">{{spotLis.spotTitle}}</span>
        <span class="spotLisCont clearfix">
          <span class="slcNum slcNumL">￥{{spotLis.spotCost}}起</span>
          <span class="slcNum slcNumR">满意度 {{spotLis.spotEval}}</span>
        </span>
      </li>
    </ul>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import Swiper from 'swiper/dist/js/swiper.min.js'
import searchBar from '../overallModules/searchBar'

export default {
  name: 'index',
  components: {
    searchBar
  },
  data () {
    return {
      spotLisData: [],
      spinShow: true
    }
  },
  mounted () {
    let _this = this
    this.axios.get('https://easy-mock.com/mock/5af29b118660fb45a03c88c6/firstH5ByVue/spotList').then(function (response) {
      // console.log(response.data.data.datas)
      _this.spotLisData = response.data.data.datas // 获取模拟的动态数据
      _this.spinShow = false
    }).catch(function (response) {
      // console.log(response)
      alert('Data request failed!')
    })
    let mySwiper = new Swiper('.swiper-container', {// eslint-disable-line no-unused-vars
      loop: true,
      autoplay: true,
      pagination: {// 分页器
        el: '.swiper-pagination'
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import '../../../static/css/page/index.scss'
</style>
